<!DOCTYPE html>  
  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>  
  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="height:100%;width: 100%;"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="cityMap.js"></script>
    <script type="text/javascript" src="city_data.js"></script>
    <script type="text/javascript" src="china_data.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>  
    <script type="text/javascript" src="http://echarts.baidu.com/examples/vendors/echarts/map/js/china.js"></script>  
    <script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));
			var option = {
		    backgroundColor: '#0A0F23',
		    title: {
		        text: '全国区域内人才流动情况',
            x: 'center',
            top:'10%',
            textStyle:{color:'#FFF',fontSize: 22}
		    },
		    legend: {
		        show: false,
		        orient: 'vertical',
				    x: '5%',
		        y: '65%',
		        data: ['地点', '流动路线'],
		        textStyle: {
		            color: '#fff',
		            fontSize:16
		        }
		    },
		    geo: {
		        map: 'china',
		        label: {
		            show:true,
		            textStyle:{color:'#FFF'},
		            emphasis: {
		                color:'#FFF'
		            }
		        },
		        left:'25%',
		        top:'12%',
		        zoom:1,
		        roam: false,
		        itemStyle: {
		            normal: {
			            areaColor: 'rgba(68, 207, 241, 0.5)',
			            borderColor: '#111'
		            },
		            emphasis: {
		                areaColor: '#2a333d'
		            }
		        }
		    },
		    series: [{
		        name: '地点',
		        type: 'effectScatter',
		        coordinateSystem: 'geo',
		        zlevel: 2,
		        rippleEffect: {
		            brushType: 'stroke'
		        },
		        symbolSize: 2,
		        showEffectOn: 'render',
		        data: citys
		    }, {
		        name: '线路',
		        type: 'lines',
		        coordinateSystem: 'geo',
		        zlevel: 2,
		        large: true,
		        effect: {
		            show: true,
		            constantSpeed: 30,
		            symbol: 'pin',
		            symbolSize: 3,
		            trailLength: 0,
		        },
		        lineStyle: {
		            normal: {
		                color: '#F58158',
		                width: 1,
		                opacity: 0.5,
		                curveness: 0.1
		            }
		        },
		        data: moveLines
		    }]
		};
		myChart.setOption(option);
    </script>  
</body>
</html>
